<template>
    <div class="nav">
        <el-menu :default-active="activeIndex" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
            background-color="#304156" active-text-color="#409eff" text-color="#fff" unique-opened router>
            <!-- 手动添加首页菜单 -->
            <el-menu-item index="/index">
                <i class="iconfont homepage"></i>
                <span>首页</span>
            </el-menu-item>
            <el-sub-menu :index="`/${item.name}`" v-for="item in user.activeMenus" :key="item.id">
                <template #title>
                    <i class="iconfont" :class="item.icon"></i>
                    <span>{{ item.title }}</span>
                </template>
                <el-menu-item :index="`/${item.name}/${citem.name}`" v-for="citem in item.children" :key="citem.id">
                    <i class="iconfont" :class="citem.icon"></i>
                    <span>{{ citem.title }}</span>
                </el-menu-item>
            </el-sub-menu>
        </el-menu>
    </div>
</template>

<script setup lang="ts">
import {
    Location,
} from '@element-plus/icons-vue'
import { useUserStore } from "@/store"
import { ref, watch } from 'vue';
import { useRoute } from 'vue-router';

const user = useUserStore()

// 动态绑定默认高亮的index
let activeIndex = ref("/index")
// 定义一个现在在哪个路由的变量
const route = useRoute()
// console.log(route.path);
// 每次将最新的路由赋值给控制高亮的变量
// activeIndex.value = route.path

watch(() => route.path, (newVal, oldVal) => {
    // console.log("new", newVal);
    // console.log("old", oldVal);
    activeIndex.value = newVal

})


const handleOpen = (key: string, keyPath: string[]) => {
    // console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
    // console.log(key, keyPath)
}
</script>

<style lang="less" scoped>

</style>